<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人中心 - 笔记云</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome图标 -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <!-- 自定义配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#334155',
            success: '#10B981',
            warning: '#F59E0B',
            neutral: {
              100: '#F5F7FA',
              200: '#E4E7ED',
              300: '#C0C4CC',
              800: '#333333'
            }
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .btn-primary {
        @apply bg-primary text-white px-4 py-2 rounded-md transition-all hover:bg-primary/90 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed;
      }
      .btn-success {
        @apply bg-success text-white px-4 py-2 rounded-md transition-all hover:bg-success/90 active:scale-95;
      }
      .btn-icon {
        @apply flex items-center justify-center rounded-md transition-all hover:bg-neutral-100 active:scale-95;
      }
      .storage-fill {
        @apply h-2 rounded-full transition-all duration-300;
      }
    }
  </style>
</head>

<body class="bg-neutral-100 min-h-screen">
  <!-- 加载指示器 -->
  <div id="loading" class="fixed inset-0 bg-white bg-opacity-75 flex items-center justify-center z-50 hidden">
    <div class="text-center">
      <i class="fa fa-spinner fa-spin text-3xl text-primary mb-4"></i>
      <p class="text-neutral-600">加载中...</p>
    </div>
  </div>

  <!-- 主容器 -->
  <div class="max-w-6xl mx-auto p-6">
    <!-- 页面头部 -->
    <div class="flex items-center justify-between mb-6">
      <div class="flex items-center gap-4">
        <button id="back-btn" class="btn-icon w-10 h-10">
          <i class="fa fa-arrow-left text-neutral-600"></i>
        </button>
        <div>
          <h1 class="text-2xl font-bold text-neutral-800">个人中心</h1>
          <p class="text-sm text-neutral-600">管理您的个人信息和账户设置</p>
        </div>
      </div>
    </div>

    <!-- 用户信息卡片 -->
    <div class="bg-white rounded-lg border border-neutral-200 p-6 mb-6">
      <div class="flex flex-col md:flex-row md:items-center gap-6">
        <!-- 头像 -->
        <div class="flex-shrink-0">
          <div class="relative">
            <div id="user-avatar"
              class="w-20 h-20 bg-neutral-300 rounded-full flex items-center justify-center overflow-hidden">
              <i class="fa fa-user text-neutral-500 text-2xl"></i>
            </div>
            <button id="avatar-upload"
              class="absolute -bottom-1 -right-1 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center hover:bg-primary/90 transition-colors">
              <i class="fa fa-camera text-sm"></i>
            </button>
            <input type="file" id="avatar-input" accept="image/*" class="hidden">
          </div>
        </div>

        <!-- 用户信息 -->
        <div class="flex-1">
          <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
              <h2 id="user-name" class="text-xl font-semibold text-neutral-800 mb-1">加载中...</h2>
              <p id="user-email" class="text-neutral-600 mb-2">加载中...</p>
              <div class="flex items-center gap-4 text-sm text-neutral-500">
                <span id="user-role">加载中...</span>
                <span>•</span>
                <span id="user-join-date">加载中...</span>
              </div>
            </div>
            <div class="flex items-center gap-3">
              <button id="edit-profile-btn" class="btn-primary">
                <i class="fa fa-edit mr-2"></i>编辑资料
              </button>
              <button id="change-password-btn" class="btn-primary">
                <i class="fa fa-key mr-2"></i>修改密码
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 统计信息 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
      <!-- 笔记统计 -->
      <div class="bg-white rounded-lg border border-neutral-200 p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm font-medium text-neutral-600">我的笔记</p>
            <p id="notes-count" class="text-2xl font-bold text-neutral-800">-</p>
          </div>
          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
            <i class="fa fa-sticky-note text-blue-600 text-xl"></i>
          </div>
        </div>
      </div>

      <!-- 文件统计 -->
      <div class="bg-white rounded-lg border border-neutral-200 p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm font-medium text-neutral-600">我的文件</p>
            <p id="files-count" class="text-2xl font-bold text-neutral-800">-</p>
          </div>
          <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
            <i class="fa fa-folder text-green-600 text-xl"></i>
          </div>
        </div>
      </div>

      <!-- 存储使用 -->
      <div class="bg-white rounded-lg border border-neutral-200 p-6">
        <div class="flex items-center justify-between mb-3">
          <div>
            <p class="text-sm font-medium text-neutral-600">存储使用</p>
            <p id="storage-text" class="text-sm text-neutral-800">-</p>
          </div>
          <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
            <i class="fa fa-hdd-o text-purple-600 text-xl"></i>
          </div>
        </div>
        <div class="w-full bg-neutral-200 rounded-full h-2">
          <div id="storage-fill" class="storage-fill bg-primary" style="width: 0%"></div>
        </div>
      </div>
    </div>

    <!-- 管理员功能 -->
    <div id="admin-section" class="hidden">
      <div class="bg-white rounded-lg border border-neutral-200 p-6 mb-6">
        <div class="flex items-center justify-between mb-6">
          <div>
            <h3 class="text-lg font-semibold text-neutral-800">系统管理</h3>
            <p class="text-sm text-neutral-600">管理系统用户和查看统计信息</p>
          </div>
          <button id="create-user-btn" class="btn-success">
            <i class="fa fa-plus mr-2"></i>创建用户
          </button>
        </div>

        <!-- 系统统计 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
          <div class="bg-neutral-50 rounded-lg p-4">
            <p class="text-sm text-neutral-600">总用户数</p>
            <p id="total-users" class="text-xl font-bold text-neutral-800">-</p>
          </div>
          <div class="bg-neutral-50 rounded-lg p-4">
            <p class="text-sm text-neutral-600">总存储使用</p>
            <p id="total-storage" class="text-xl font-bold text-neutral-800">-</p>
          </div>
          <div class="bg-neutral-50 rounded-lg p-4">
            <p class="text-sm text-neutral-600">系统运行时间</p>
            <p id="system-uptime" class="text-xl font-bold text-neutral-800">-</p>
          </div>
        </div>

        <!-- 用户管理 -->
        <div class="border-t border-neutral-200 pt-6">
          <div class="flex items-center justify-between mb-4">
            <h4 class="font-medium text-neutral-800">用户管理</h4>
            <div class="flex items-center gap-3">
              <input type="text" id="user-search" placeholder="搜索用户..."
                class="px-3 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
              <button id="refresh-users-btn" class="btn-icon w-10 h-10" title="刷新">
                <i class="fa fa-refresh text-neutral-600"></i>
              </button>
            </div>
          </div>

          <!-- 用户列表 -->
          <div class="overflow-x-auto">
            <table class="w-full">
              <thead class="bg-neutral-50 border-b border-neutral-200">
                <tr>
                  <th class="p-3 text-left text-sm font-medium text-neutral-700">用户</th>
                  <th class="p-3 text-left text-sm font-medium text-neutral-700">角色</th>
                  <th class="p-3 text-left text-sm font-medium text-neutral-700">存储使用</th>
                  <th class="p-3 text-left text-sm font-medium text-neutral-700">注册时间</th>
                  <th class="p-3 text-left text-sm font-medium text-neutral-700">操作</th>
                </tr>
              </thead>
              <tbody id="users-table-body">
                <!-- 用户行将通过JavaScript动态加载 -->
              </tbody>
            </table>
          </div>

          <!-- 用户加载状态 -->
          <div id="users-loading" class="text-center py-8 hidden">
            <i class="fa fa-spinner fa-spin text-2xl text-neutral-400 mb-2"></i>
            <p class="text-neutral-500">加载用户列表中...</p>
          </div>

          <!-- 用户空状态 -->
          <div id="users-empty-state" class="text-center py-8 hidden">
            <i class="fa fa-users text-2xl text-neutral-400 mb-2"></i>
            <p class="text-neutral-500">暂无用户数据</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 编辑资料模态框 -->
  <div id="edit-profile-modal"
    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold text-neutral-800">编辑个人资料</h3>
        <button id="close-edit-modal" class="btn-icon w-8 h-8">
          <i class="fa fa-times text-neutral-500"></i>
        </button>
      </div>

      <div class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-neutral-700 mb-2">昵称</label>
          <input type="text" id="edit-nickname"
            class="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
        </div>

        <div>
          <label class="block text-sm font-medium text-neutral-700 mb-2">邮箱</label>
          <input type="email" id="edit-email" disabled
            class="w-full px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 text-neutral-500">
          <p class="text-xs text-neutral-500 mt-1">邮箱地址不可修改</p>
        </div>
      </div>

      <div class="flex items-center justify-end gap-3 mt-6">
        <button id="cancel-edit-btn" class="px-4 py-2 text-neutral-600 hover:text-neutral-800 transition-colors">
          取消
        </button>
        <button id="save-profile-btn" class="btn-primary">
          保存
        </button>
      </div>
    </div>
  </div>

  <!-- 修改密码模态框 -->
  <div id="change-password-modal"
    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold text-neutral-800">修改密码</h3>
        <button id="close-password-modal" class="btn-icon w-8 h-8">
          <i class="fa fa-times text-neutral-500"></i>
        </button>
      </div>

      <div class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-neutral-700 mb-2">当前密码</label>
          <input type="password" id="current-password"
            class="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
        </div>

        <div>
          <label class="block text-sm font-medium text-neutral-700 mb-2">新密码</label>
          <input type="password" id="new-password"
            class="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
        </div>

        <div>
          <label class="block text-sm font-medium text-neutral-700 mb-2">确认新密码</label>
          <input type="password" id="confirm-password"
            class="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
        </div>
      </div>

      <div class="flex items-center justify-end gap-3 mt-6">
        <button id="cancel-password-btn" class="px-4 py-2 text-neutral-600 hover:text-neutral-800 transition-colors">
          取消
        </button>
        <button id="save-password-btn" class="btn-primary">
          修改密码
        </button>
      </div>
    </div>
  </div>

  <!-- 引入应用脚本 -->
  <script src="/js/utils/api.js"></script>
  <script src="/js/utils/auth.js"></script>
  <script src="/js/utils/notification.js"></script>
  <script src="/js/components/profile.js"></script>
</body>

</html>